行の高さの自動調整

Spread.Viewsでは、行の高さを自動調整できます。autoRowHeightプロパティをtrueに設定すると、行内のデータに合わせ、行の高さが動的に計算されます。

グリッド内で行の高さを自動調整するには、次の手順を実行します。

サンプルコード

1. DIVタグを使用して、列定義、およびrowTemplate変数の定義を追加します。

    var timeFormatter = 'HH:mmtt';
           var presenter = '<div class="container">' +
               '<div class="photo"><img src={{=it.photo}} /></div>' +
               '<div class="name">{{=it.name}}</div>' +
               '</div>';
           var columns = [{
               id: 'photo',
               caption: 'Photo',
               dataField: 'photo'
           }, {
               id: 'name',
               caption: 'Name',
               dataField: 'name'
           }, {
               id: 'income',
               caption: 'Income',
               dataField: 'income',
               format: '$#,###'
           }, {
               id: 'info',
               dataField: 'photo,name',
               presenter: presenter
           }];
           var rowTemplate = '<div class="rowDiv" style ="width:100%;height:100%;">' +
               '<div class="productDiv" data-column="info"></div>' +
               '<div class="incomeDiv c2"> <div class="container"> <span class="incomeSpan" data-column="income"></span> </div> </div>' +
           '</div>';

2. DIVタグのグリッドIDを呼び出してコードを初期化し、autoRowHeightプロパティをtrueに設定します。これで、行内のデータに合わせ、行の高さがグリッドによって自動計算されます。

   var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
               autoRowHeight: true,
               showColHeader: false,
               showRowHeader: false,
               selectionMode: 'none',
               rowTemplate: rowTemplate
           }));
           refreshTotalPrice();
   
           //focus data.view by default
       document.querySelector('#grid1').focus();

3. 合計金額を計算し、Excel同様の書式を列に適用するrefreshTotalPrice関数を追加します。

   function refreshTotalPrice() {
               var sum = dataView.data.evaluate('sum([income])');
               var excelFormatter = new GC.Spread.Formatter.GeneralFormatter('#,###');
               sum = excelFormatter.format(sum);
               var count = dataView.data.evaluate('count([income])');
   
               var totalPriceSpan = document.getElementById('total');
               totalPriceSpan.innerHTML = '<div class="product-total-inner">Total (' + count + ' items): ' + '<span>$' + sum + '</span></div>';
       }

参照

行テンプレートの使用 selectionMode